<script setup>
import { ref, reactive } from 'vue'
import { getRtmp, closeRtmp } from '@/assets/api/device'
import 'videojs-flash'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import config from '@/assets/js/config'
defineProps({
    visible: {
        type: Boolean,
        required: true,
    },
    activeData: {
        type: Object,
        default() {
            return null
        },
    },
    title: {
        type: String,
        default: '',
    },
})
const emits = defineEmits(['update:visible'])
const activeNewData = ref()
function updateVideo(number) {
    activeNewData.value = number
    const params = {
        number: number,
        ip_addr: config.IPUrl,
    }
    getRtmp(params).then((res) => {
        play(res.data)
    })
}
function play(url) {
    if (player) {
        player.src({
            src: url,
            type: 'rtmp',
        })
    } else {
        const playerOptions = reactive({
            autoplay: true, // 是否自动播放
            fullscreenToggle: false, // 是否全屏
            muted: true, // 是否静音
            controls: false,
            fluid: false, // 宽高自适应
            techOrder: ['html5', 'flash'],
            // techOrder: ['flash', 'html5'],
            notSupportMessage: '无法播放',
            id: ref('v' + +new Date()),
            sources: [
                {
                    src: url,
                    type: 'rtmp',
                },
            ],
        })
        initPlayer(playerOptions)
    }
}
function initPlayer(options) {
    player = videojs(videoRef.value, options, () => {
        videojs.log('播放器已经准备好了!')
        player.on('error', (e) => {
            console.log('error', e)
            loading.value = true
            loadingText.value = '加载失败'
        })
        player.on('loadstart', (e) => {
            console.log('loadstart', e)
            loading.value = true
            loadingText.value = '开始加载'
        })
        player.on('progress', () => {
            console.log('progress')
            loading.value = false
            loadingText.value = '加载中'
        })
        player.on('timeupdate', () => {
            // console.log('timeupdate')
        })
        player.on('loadedmetadata', () => {
            console.log('loadedmetadata')
        })
        player.on('playing', () => {
            console.log('playing')
        })
        player.on('pause', () => {
            loading.value = false
            console.log('pause')
        })
        player.on('play', () => {
            console.log('play')
            loading.value = false
        })
        player.on('waiting', () => {
            console.log('waiting')
            // loading.value = true
            // loadingText.value = '等待响应'
        })
        player.on('stalled', () => {
            console.log('网速异常')
        })
    })
}
const videoRef = ref()
let player = null
const loading = ref(false)
const playType = ref('MP4')
const loadingText = ref('')
function closeVideo(number) {
    closeRtmp(number).then(() => {
        console.log('关闭成功', number)
    })
}
function closeAction() {
    emits('update:visible', false)
    closeVideo(activeNewData.value)
    // if (player) {
    //     player.dispose()
    // }
}
// function internalCloseVideo() {
//     closeVideo(activeData.value)
//     if (player) {
//         player.dispose()
//     }
// }
defineExpose({ updateVideo })
</script>

<template>
    <el-dialog
        :model-value="visible"
        title="播放"
        width="800px"
        :draggable="true"
        @close="closeAction"
    >
        <div class="media-live">
            <div class="media-live-video">
                <video
                    ref="videoRef"
                    class="video-js vjs-default-skin vjs-big-play-centered"
                    style="width: 100%; height: 100%"
                    preload="auto"
                    crossOrigin
                    data-setup='{ "html5" : { "nativeTextTracks" : false } }'
                ></video>
            </div>
            <div class="live-player-tools">
                <div class="direction">
                    <div class="direction-item up">
                        <el-icon class="direction-icon"><CaretTop /></el-icon>
                    </div>
                    <div class="direction-item right">
                        <el-icon class="direction-icon"><CaretRight /></el-icon>
                    </div>
                    <div class="direction-item left">
                        <el-icon class="direction-icon"><CaretLeft /></el-icon>
                    </div>
                    <div class="direction-item down">
                        <el-icon class="direction-icon">
                            <CaretBottom />
                        </el-icon>
                    </div>
                    <div class="direction-audio"></div>
                </div>
                <div class="zoom">
                    <div class="zoom-item zoom-in">
                        <el-icon><Plus /></el-icon>
                    </div>
                    <div class="zoom-item zoom-out">
                        <el-icon><Minus /></el-icon>
                    </div>
                </div>
            </div>
        </div>
        <div class="media-live-tool">
            <el-radio-group v-model="playType" size="large">
                <el-radio-button label="MP4" />
                <el-radio-button label="FLV" />
                <el-radio-button label="HLS" />
            </el-radio-group>
        </div>
    </el-dialog>
</template>
<style lang="scss" scoped>
.video {
    position: relative;
    width: 100%;
    height: 100%;
}
.video-name {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}
.video-status {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
    width: 100%;
    height: 100%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 9999;
}
.video-back {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}
</style>
